/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react/react-in-jsx-scope */
/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-09-21 11:34:04
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-09-26 10:23:18
 * @FilePath: /utools_web/src/components/TagList/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import AntdIcons from 'react-native-vector-icons/AntDesign';
import {View, Text, Chip, Colors} from 'react-native-ui-lib';
import React, { memo } from 'react';


const TagList = ({item, limit}) => (
  <View marginT-10 row style={{gap: 6}}>
    {item?.itemTagList
      ?.filter((it, i) => i < limit)
      .map(it => {
        const isLongTag = it?.name?.length > 4;
        return (
          <Chip
            key={it?.id}
            backgroundColor={it?.color}
            label={isLongTag ? `${it?.name?.slice(0, 4)}` : it.name}
            containerStyle={{
              borderColor: it?.color ? 'transparent' : Colors.bodyColor,
            }}
            labelStyle={{
              color: it?.color ? Colors.white : Colors.bodyColor,
            }}
          />
        );
      })}
    {item?.itemTagList?.length > limit && (
      <Chip
        iconSource={require('@/assets/ellipsis.png')}
        iconStyle={{width: 24, height: 24}}
        iconProps={{tintColor: Colors.bodyColor}}
        containerStyle={{
          borderColor: Colors.bodyColor,
        }}
      />
    )}
  </View>
);

export default memo(TagList);
